<template>
  <div id="User">
    <input type="text" v-on:keyup.enter="search_info" v-model="query_key">
    <button @click="search_info">查询</button>
    <br>
    <p>查询结果如下:</p>
    <br>
    <ul>
      <li><span>用户名:</span><span>{{ con.name }}</span></li>
      <li><span>密码:</span><span>{{ con.pwd }}</span></li>
      <li><span>邮箱:</span><span>{{ con.email }}</span></li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {

                query_key: "",
                con: {
                   name:"",
                   pwd:"",
                   email:"",
                },
                msg: 'my page info at here',
            }
        },
        created() {
            // $.getJSON("http://127.0.0.1:8000/api/test/", function (data) {
            //     console.log(data);
            // });
            // this.axios.get("https://autumnfish.cn/api/joke")
            // // this.axios.get("https://api.douban.com//v2/movie/top250")
            //     .then(response => {
            //         console.log(response);
            //         this.con = response.data
            //     });

        },
        methods: {
            search_info: function (event) {
                this.axios.get("/api/test/?name="+this.query_key).then(response => {
                    console.log(response);
                    if (response.data.username == "Null") {
                        alert("您查询的信息不存在,请输入正确的名字!");
                        this.query_key = "";
                    }
                    this.con.name = response.data.username;
                    this.con.pwd = response.data.password;
                    this.con.email = response.data.email;
                });
            }
        }
    }
</script>

<style scoped>

</style>
